<!DOCTYPE html>
<html>

<body>
    <script type="text/javascript" src="../common/echarts.min.js"></script>
    <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="../common/index.css">
    <title>巷道出入库任务队列看板</title>
    <script type="text/javascript">
        var myBarEcharts = null;
        const fetchData = () => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: '/les/BillboardReportController/getRoadTaskInfo',
                    type: 'GET',
                    dataType: 'json',
                    success: function (res) {
                        if (res.retCode === '200') {
                            resolve(res.responseBody);
                        } else {
                            reject(new Error(res.message));
                        }
                    },
                    error: function (xhr, status, error) {
                        reject(error);
                    }
                });
            });
        };

        window.onload = function () {
            // 获取巷道
            var data = [];
            fetchData()
                .then(processList => {
                    myBar(processList);
                    tableScroll(processList);
                })
                .catch(err => {
                    console.error('获取数据失败:', err);
                });

            setInterval(function () {
                data = [];
                fetchData()
                    .then(processList => {
                        updateMyBar(processList);
                        tableScroll(processList);
                    })
                    .catch(err => {
                        console.error('获取数据失败:', err);
                    });
            }, 10000);
        }
        function myBar(data) {
            myBarEcharts = echarts.init(document.getElementById('myBar'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                },
                legend: {
                    left: '10%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '0%',
                    right: '4%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.roadway),
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        color: '#fff',
                        fontSize: 12,
                    }
                },
                yAxis: {
                    show: false
                },
                series: [
                    {
                        name: '入库',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: 40,
                        emphasis: {
                            focus: 'series'
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value === '0' ? '' : params.value; // 这里
                            },
                            color: '#000'
                        },
                        data: data.map(item => item.storage)
                    },
                    {
                        name: '出库',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: 40,
                        emphasis: {
                            focus: 'series'
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value === '0' ? '' : params.value; // 这里
                            },
                            color: '#000'
                        },
                        data: data.map(item => item.outbound)
                    },
                    {
                        name: '移库',
                        type: 'bar',
                        barWidth: 40,
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value === '0' ? '' : params.value; // 这里
                            },
                            color: '#000'
                        },
                        data: data.map(item => item.movingInventory)
                    }
                ]
            };
            myBarEcharts.setOption(option);
        }
        function updateMyBar(data) {
            myBarEcharts.setOption({
                series: [
                    {
                        data: data.map(item => item.storage)
                    },
                    {
                        data: data.map(item => item.outbound)
                    },
                    {
                        data: data.map(item => item.movingInventory)
                    }
                ]
            })
        }
        //滚动表格
        function tableScroll(data) {
            let processList = data;
            let processHtml = '<ul class="list">';
            var row = 0;
            processList.forEach(element => {
                processHtml += ('<li class="item">' +
                    '<span style="width:25%" class="roadway' + row + '">' + element.roadway + '</span>' +
                    '<span style="width:25%" class="storage' + row + '">' + element.storage + '</span>' +
                    '<span style="width:25%" class="outbound' + row + '">' + element.outbound + '</span> ' +
                    '<span style="width:25%" class="movingInventory' + row + '">' + element.movingInventory + '</span>');
                row++;
            });
            $(".process-td").append(processHtml += "</ul>");
            $(".process-td").empty().append(processHtml);
            // var html = $(".process-td ul").html();


            // var containerHeight = $(".process-td").height();
            // var itemHeight = $(".process-td li").outerHeight(true);
            // if (processList.length > Math.round(containerHeight / itemHeight)) {
            //     $(".process-td ul").append(html);
            //     var ls = $(".process-td li").length / 2;
            //     a = 0
            //     ref = setInterval(function () {
            //         a++
            //         if (a == ls) {
            //             a = 1
            //             $(".process-td ul").css({ marginTop: 0 })
            //             $(".process-td ul").animate({ marginTop: -'2.28' * a + 'vw' }, 1000)
            //         }
            //         $(".process-td ul").animate({ marginTop: -'2.28' * a + 'vw' }, 1000)
            //     }, 2500);
            // }
        }
        // function updateMyTable(data) {
        //     for (let i = 0; i < data.length; i++) {
        //         const element = data[i];
        //         $(".roadway" + i).html(element.roadway);
        //         $(".storage" + i).html(element.storage);
        //         $(".outbound" + i).html(element.storage);
        //         $(".movingInventory" + i).html(element.storage);
        //     }
        // }
    </script>
    <style>
        .title {
            color: #68d8fe;
            display: flex;
            justify-content: center;
            font-size: 3vw;
            padding-top: 1vw;
        }

        .echart {
            display: flex;
            align-items: center;
            height: 81%;
            margin-top: 5vw;

        }

        #myBar {
            width: 60%;
            height: 100%;
        }

        #myTable {
            width: 40%;
            height: 100%;
        }

        .process-td {
            background-color: transparent;
        }

        .header-td {
            width: 100%;
            font-size: 1.1vw;
            color: #68d8fe;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            position: relative;
        }

        .item {
            margin: 1vw 0;
        }
    </style>
    <div class="main">
        <div class="title">巷道出入库任务队列看板</div>
        <div class="echart">
            <div id="myBar"></div>
            <div id="myTable">
                <div class="header-td">
                    <ul class="list">
                        <li class="item" style="display: flex;justify-content: space-between;align-items: center;">
                            <span style="width:25%;display: inline-block;text-align: center;">巷道</span>
                            <span style="width:25%;display: inline-block;text-align: center;">入库</span>
                            <span style="width:25%;display: inline-block;text-align: center;">出库</span>
                            <span style="width:25%;display: inline-block;text-align: center;">移库</span>
                        </li>
                    </ul>
                </div>
                <div class="process-td"></div>
            </div>
        </div>
    </div>
</body>

</html>